<template>
    <div class="FourBoxWrap" :style="{ '--widht-height': typeWidthHeight[type] }">
        <div class="box">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    // 四个角存在类似角标
    name: 'FourBox',
    data() {
        return {
            typeWidthHeight: {
                'mide': '1.25vw',
                'long': '2vw',
                'mini': '0.5vw',
            }
        }
    },
    props: {
        type: {
            type: [String],
            default: () => 'mide'
        },
    },
}
</script>
<style lang="less" scoped>
.FourBoxWrap {

    position: relative;
    height: 100%;
    width: 100%;
    border: 0.1vw solid rgba(68, 170, 255, 0.17);

    .box::after {

        position: absolute;

        bottom: 0;

        right: 0;

        width: var(--widht-height);

        height: var(--widht-height);

        border-right: 0.15vw solid #44aaff;

        border-bottom: 0.15vw solid #44aaff;

        content: "";

    }

    .box::before {

        position: absolute;

        bottom: 0;

        left: 0;

        width: var(--widht-height);

        height: var(--widht-height);

        border-left: 0.15vw solid #44aaff;

        border-bottom: 0.15vw solid #44aaff;

        content: "";

    }

}

.FourBoxWrap::before {

    position: absolute;

    top: 0;

    left: 0;

    width: var(--widht-height);

    height: var(--widht-height);

    border-left: 0.15vw solid #44aaff;

    border-top: 0.15vw solid #44aaff;

    content: "";

}

.FourBoxWrap::after {

    position: absolute;

    content: "";

    top: 0;

    right: 0;

    width: var(--widht-height);

    height: var(--widht-height);

    border-right: 0.15vw solid #44aaff;

    border-top: 0.15vw solid #44aaff;



}
</style>